<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/detail.css">
    <script src="/js/swiper-bundle.min.js"></script>
</head>

<body>
    <div class="main">
        <div class="swiper-container top">
            <div class="swiper-wrapper top-content">
                <div class="swiper-slide"><img src="/img/slider1.jpg"></div>
                <div class="swiper-slide"><img src="/img/slider2.jpg"></div>
                <div class="swiper-slide"><img src="/img/slider3.jpg"></div>
                <div class="swiper-slide"><img src="/img/slider4.jpg"></div>
            </div>
        </div>
        <div class="djs">
            活动倒计时:<span id="day"></span>天<span id="hour"></span>时<span id="minute"></span>分<span id="second"></span>秒
        </div>
        <div class="kjxq">
            <div class="xq-top">
                <div class="xq-top-left"><img src="/img/xq.jpg"></div>
                <div class="xq-top-right">
                    <div class="name">笔记本</div>
                    <div class="count">剩余20</div>
                    <div class="price">
                        <div class="dj">￥60</div>
                        <div class="yj">￥199</div>
                    </div>
                </div>
            </div>
            <div class="xq-middle active">
                <div class="canjia">
                    <a href="#">我要参加</a>
                </div>
            </div>
            <div class="xq-bottom">
                <div class="cyrs">
                    <span>已有<i>5</i>人参加</span>
                </div>
                <div class="cytx" id="tx"></div>
            </div>
        </div>
        <div class="spjs">
            <div class="header">商品介绍</div>
            <hr>
            <div class="content">
                <p>块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离</p>
                <img src="/img/p1.jpg" alt="">
                <img src="/img/p2.jpg" alt="">
                <img src="/img/p3.jpg" alt="">
            </div>
        </div>
        <div class="ph">
            <div class="ph-top">排行榜</div>
            <hr />
            <div class="ph-content">
                <div class="content-top">
                    <div class="content-top-left">
                        <div class="content-top-left-item">排名</div>
                        <div class="content-top-left-item">头像</div>
                        <div class="content-top-left-item">昵称</div>
                    </div>
                    <div class="content-top-right">状态</div>
                </div>
                <div class="content-left">
                    <div class="content-left-item">1</div>
                    <div class="content-left-item"><img src="/img/tx2.jpg" alt="" srcset=""></div>
                    <div class="content-left-item">
                        <div>wswj</div>
                        <div>笔记本</div>
                    </div>
                </div>
                <div class="content-right">33%</div>

            </div>
            <div class="ph-footer">
                <a>点击显示更多</a>
            </div>
        </div>
        <div class="footer">
            <div class="footer-top">活动规则</div>
            <hr />
            <div class="footer-content">
                <p>活动规则<br/> 选择你要参加的奖品砍价,在规定的时间内完成砍价的就可以以最低的价格获得你的奖品了
                </p>
            </div>
        </div>
    </div>
    <script src="/js/detail.js"></script>
</body>

</html>